<template>
  <div class="banner" v-show="BannerList">
    <swiper :options='swiperOptions'>
      <swiper-slide v-for=" v in BannerList" :key="v.id">
        <img :src="v.picUrl" @load="imgLoad" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  components: { Swiper, SwiperSlide },
  props: {
    BannerList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      flag: false,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: true
      }
    }
  },
  methods: {
    imgLoad() {
      if (!this.flag) {
        this.flag = true
        this.$emit('img-load')
      }
    }
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 0;
  padding-bottom: 150px;
}
.banner img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.banner >>> .swiper-pagination-bullet-active {
  width: 16px;
  border-radius: 8px;
  background-color: #fff;
}
</style>